// 颜色相关
import * as echarts from 'echarts'

export const colorGradientCyan = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgb(128, 255, 165)' },
  { offset: 1, color: 'rgb(1, 191, 236)' }
])
export const colorGradientBlueLight = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgb(0, 221, 255)' },
  { offset: 1, color: 'rgb(77, 119, 255)' }
])
export const colorGradientBlueDark = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgb(55, 162, 255)' },
  { offset: 1, color: 'rgb(116, 21, 219)' }
])
export const colorGradientPink = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgb(255, 0, 135)' },
  { offset: 1, color: 'rgb(135, 0, 157)' }
])
export const colorGradientOrange = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgb(255, 191, 0)' },
  { offset: 1, color: 'rgb(224, 62, 76)' }
])

export const colorGradientBlue = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: '#83bff6' },
  { offset: 0.5, color: '#188df0' },
  { offset: 1, color: '#188df0' }
])
export const colorGradientBlueEmphasis = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: '#2378f7' },
  { offset: 0.7, color: '#2378f7' },
  { offset: 1, color: '#83bff6' }
])

// 折线图相关
export const dataSourceLine = {
	title: '基础折线图',
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Value', data: [150, 230, 224, 218, 135, 147, 260] }
	]
}

export const dataSourceSmoothedLine = {
	title: '基础平滑折线图',
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Value', data: [820, 932, 901, 934, 1290, 1330, 1320], smooth: true }
	]
}

export const dataSourceArea = {
	title: '基础面积图',
  boundaryGap: false,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Value', data: [820, 932, 901, 934, 1290, 1330, 1320], areaStyle: {} }
	]
}

export const dataSourceStackedLine = {
	title: '折线图堆叠',
  boundaryGap: false,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Email', data: [120, 132, 101, 134, 90, 230, 210], stack: 'Total' },
		{ name: 'Union Ads', data: [220, 182, 191, 234, 290, 330, 310], stack: 'Total' },
		{ name: 'Video Ads', data: [150, 232, 201, 154, 190, 330, 410], stack: 'Total' },
		{ name: 'Direct', data: [320, 332, 301, 334, 390, 330, 320], stack: 'Total' },
		{ name: 'Search Engine', data: [820, 932, 901, 934, 1290, 1330, 1320], stack: 'Total' }
	]
}

export const dataSourceStackedArea = {
	title: '堆叠面积图',
  boundaryGap: false,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Email', data: [120, 132, 101, 134, 90, 230, 210], stack: 'Total', areaStyle: {} },
		{ name: 'Union Ads', data: [220, 182, 191, 234, 290, 330, 310], stack: 'Total', areaStyle: {} },
		{ name: 'Video Ads', data: [150, 232, 201, 154, 190, 330, 410], stack: 'Total', areaStyle: {} },
		{ name: 'Direct', data: [320, 332, 301, 334, 390, 330, 320], stack: 'Total', areaStyle: {} },
		{ name: 'Search Engine', data: [820, 932, 901, 934, 1290, 1330, 1320], stack: 'Total', areaStyle: {} }
	]
}

const areaOpacity = 0.8
const lineWidth = 0

export const dataSourceGradientStackedArea = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
	title: '渐变堆叠面积图',
  boundaryGap: false,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Line 1', data: [140, 232, 101, 264, 90, 340, 250], showSymbol: false, stack: 'Total', lineWidth: lineWidth, areaStyle: { opacity: areaOpacity, color: colorGradientCyan }, smooth: true },
		{ name: 'Line 2', data: [120, 282, 111, 234, 220, 340, 310], showSymbol: false, stack: 'Total', lineWidth: lineWidth, areaStyle: { opacity: areaOpacity, color: colorGradientBlueLight }, smooth: true },
		{ name: 'Line 3', data: [320, 132, 201, 334, 190, 130, 220], showSymbol: false, stack: 'Total', lineWidth: lineWidth, areaStyle: { opacity: areaOpacity, color: colorGradientBlueDark }, smooth: true },
		{ name: 'Line 4', data: [220, 402, 231, 134, 190, 230, 120], showSymbol: false, stack: 'Total', lineWidth: lineWidth, areaStyle: { opacity: areaOpacity, color: colorGradientPink }, smooth: true },
		{ name: 'Line 5', data: [220, 302, 181, 234, 210, 290, 150], showSymbol: false, stack: 'Total', lineWidth: lineWidth, areaStyle: { opacity: areaOpacity, color: colorGradientOrange }, smooth: true }
	]
}

// 柱状图相关
export const dataSourceBar = {
	title: '基础柱状图',
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Value', data: [120, 200, 150, 80, 70, 110, 130] }
	]
}

export const dataSourceAxisAlign = {
	title: '坐标轴刻度与标签对齐',
  alignWithLabel: true,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Direct', data: [10, 52, 200, 334, 390, 330, 220], barWidth: '60%' }
	]
}

export const dataSourceSetStyleOfSingleBar = {
	title: '背景色|渐变色',
  alignWithLabel: false,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Direct', data: [120, {
      value: 200,
      itemStyle: {
        color: colorGradientBlue
      },
      emphasis: {
        itemStyle: {
          color: colorGradientBlueEmphasis
        }
      }
    }, 150, 80, 70, 110, 130], showBackground: true, showMarkLine: true }
	]
}

export const dataSourceHorizontalBar = {
	title: '条形图',
  isHorizontal: true,
	xAxisData: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
	yAxisData: [
		{ name: '2011', data: [18203, 23489, 29034, 104970, 131744, 630230] },
		{ name: '2022', data: [19325, 23438, 31000, 121594, 134141, 681807] }
	]
}

export const dataSourceStackedHorizontalBar = {
	title: '堆叠条形图',
  isHorizontal: true,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Direct', data: [320, 302, 301, 334, 390, 330, 320], stack: 'Total', barWidth: 20 },
		{ name: 'Mail Ad', data: [120, 132, 101, 134, 90, 230, 210], stack: 'Total', barWidth: 20 },
		{ name: 'Affiliate Ad', data: [220, 182, 191, 234, 290, 330, 310], stack: 'Total', barWidth: 20 },
		{ name: 'Video Ad', data: [150, 212, 201, 154, 190, 330, 410], stack: 'Total', barWidth: 20 },
		{ name: 'Search Engine', data: [820, 832, 901, 934, 1290, 1330, 1320], stack: 'Total', barWidth: 20 }
	]
}

export const dataSourceMixed = {
	title: '折柱混合',
  showToolbox: true,
	xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	yAxisData: [
		{ name: 'Precipitation', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], unit: 'ml', min: 0, max: 250, interval: 50, },
		{ name: 'Evaporation', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], unit: 'ml', min: 0, max: 250, interval: 50, },
		{ name: 'Temperature', data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2], unit: '°C', min: 0, max: 25, interval: 5, type: 'line', yAxisIndex: 1}
	]
}

export const dataSourcePie = {
	title: '基础饼图',
  pieName: 'Access From',
	pieData: [
		{ name: 'Search Engine', value: 1048 },
		{ name: 'Direct', value: 735 },
		{ name: 'Email', value: 580 },
		{ name: 'Union Ads', value: 484 },
		{ name: 'Video Ads', value: 300 }
	]
}

export const dataSourceDoughnut = {
	title: '圆角环形图',
  pieName: 'Access From',
  // startAngle: 180,
  // endAngle: 360, // 从 v5.5.0 开始支持
  // padAngle: 10, // 从 v5.5.0 开始支持
  showLabel: false,
  labelPosition: 'center',
  showLabelLine: false,
  borderRadius: 10,
  pieRadius: ['30%', '60%'],
	pieData: [
		{ name: 'Search Engine', value: 1048 },
		{ name: 'Direct', value: 735 },
		{ name: 'Email', value: 580 },
		{ name: 'Union Ads', value: 484 },
		{ name: 'Video Ads', value: 300 }
	]
}

export const dataSourceNightingale = {
	title: '基础南丁格尔玫瑰图',
  pieName: 'Nightingale Chart',
  roseType: 'area',
  borderRadius: 5,
  pieCenter: ['50%', '60%'],
  pieRadius: ['10%', '50%'],
	pieData: [
		{ name: 'rose 1', value: 40 },
		{ name: 'rose 2', value: 38 },
		{ name: 'rose 3', value: 32 },
		{ name: 'rose 4', value: 30 },
		{ name: 'rose 5', value: 28 },
		{ name: 'rose 6', value: 26 },
		{ name: 'rose 7', value: 22 },
		{ name: 'rose 8', value: 18 }
	]
}